<template>
    <div class="lesson-detail-view">    
        <head-v :text="title">
            <go-back slot="goback"></go-back>
        </head-v>
        <div class="lesson-bar">
            <ul>
                <li><span :class="{'active':show}" @click="toggle">详情</span></li>
                <li><span :class="{'active':!show}" @click="toggle">评价</span></li>
            </ul>
        </div>
        <div class="lesson-detail" v-show="show">
            <div class="lesson-category">
                <p>【课程类别】{{lesson.name}}<span class="level">{{lesson.level}}</span></p>
                <p><span class="credit">{{lesson.credit}}学分</span><span class="period">{{lesson.period}}学时</span></p>
                <p class="special-p">达标评定方式:<span class="grey">{{lesson.way}}</span></p>
                <p class="special-p">有效学习时间:<span class="grey">{{lesson.time}}</span></p>
                <div class="tab">
                    <i class="icon-angle-right"></i>
                    <span>课程介绍</span>
                </div>
            </div>
            <div class="lesson-introduce">
                <p class="introduce">《概率论与数理统计》是我校理、工、经管类本科生必修的一门重要的基础课。也是工学、经济学硕士
                    研究生入学考试的一门必考科目。概率论是一门研究随机现象统计规律性数量关系的数学学科，而数理
                    统计是研究如何有效地收集整理和分析受随机。
                </p>
                <div class="tab">
                    <i class="icon-angle-right"></i>
                    <span>课程大纲</span>
                </div>
            </div>
            <div class="lesson-introduce">
                <p>《易语言知识库》视频版·讲座简介</p>
                <p>本节课主要介绍了《易语言知识库》视频版的整体课程大纲</p>
                <p>第1课：什么是易语言支持库？如何学习</p>
                <p>第2课：窗口组件基本事件</p>
                <p>第3课：拖放支持库  观看试看课程</p>
                <p>第4课：新手学习易语言的方法探讨</p>
                <p>第5课：拓展界面支持库(一)_树型框-属性-1</p>
                <p>第6课：拓展界面支持库(一)_树型框-属性-2</p>
            </div>
        </div>
        <div class="lesson-evaluate" v-show="!show">
            <evaluate-info v-for="user in users" 
            :userimg="user.img"
            :username="user.name"
            :content="user.content"
            :date="user.date"
            :starNum="user.stars">
            </evaluate-info>
        </div>
        <div class="lesson-footer">
            <div>
                <mt-button class="register">立即报名</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
    import Header from "./Header.vue"
    import GoBack from "../components/GoBack.vue"
    import { Button } from "mint-ui"
    import 'mint-ui/lib/button/style.css'
    import EvaluateInfo from "../components/EvaluateInfo.vue"
    export default{
        data(){
            return{
                title:"Lux教学视频",
                lesson:{
                    name:"DDP录入培训上册精讲",
                    level:"必修",
                    credit:"100",
                    period:"60",
                    way:"达到学习时长",
                    time:"2016年8月8日至2016年8月9日"
                },
                show:true,
                users:[
                    { img:"../../static/lux_1.jpg",name:"Lux",content:"真是个深思熟虑的选择！",date:"2016-10-21",stars:"4" },
                    { img:"../../static/lux_2.jpg",name:"Lux",content:"真是个深思熟虑的选择！",date:"2016-10-21",stars:"3" },
                    { img:"../../static/lux_3.jpg",name:"Lux",content:"真是个深思熟虑的选择！",date:"2016-10-21",stars:"2" },
                    { img:"../../static/lux_4.jpg",name:"Lux",content:"真是个深思熟虑的选择！",date:"2016-10-21",stars:"1" },
                ]
            }
        },
        methods:{
            toggle:function(){
                this.show=this.show?false:true
            }
        },
        components:{
            HeadV:Header,
            GoBack,
            MtButton:Button,
            EvaluateInfo
        }
    }
</script>
<style lang="scss">
    /*LessonDetailView.vue*/
    @import "../assets/css/function.scss";
    .lesson-detail-view{
        margin-bottom:50px;       
        .lesson-bar{
            font-family:"微软雅黑";
            background:#fff;
            border-bottom:2px solid #eee;
            height:pxToRem(42px);            
            ul{
                padding:pxToRem(10px) 0 0 0;
                margin-top:pxToRem(10px);

                li{
                    float:left;
                    list-style:none;
                    box-sizing:border-box;
                    width:pxToRem(160px);
                    text-align:center;
                    font-size:pxToRem(16px);
                    span{
                        box-sizing:border-box;
                        display:inline-block;
                        width:pxToRem(80px);
                        height:pxToRem(33px);
                    }
                    .active{
                        color:rgba(0,206,169,1);
                        border-bottom:2px solid rgba(0,206,169,1);
                    }
                }
            }
        }
        .lesson-detail{
            background:#fff;
            font-size:pxToRem(16px);
            .lesson-category{
                font-family:"黑体";
                padding:pxToRem(10px) pxToRem(4px) 0;
                border-bottom:2px solid #eee;
                p{
                    padding:pxToRem(3px) 0;               
                    .level{
                        font-size:pxToRem(12px);
                        background:rgba(254,129,5,1);
                        color:#fff;
                        padding:pxToRem(3px) pxToRem(3px);
                        border-radius:pxToRem(3px);
                        margin-left:pxToRem(20px);
                    }
                    .credit{
                        font-size:pxToRem(14px);
                        padding-left:pxToRem(7px);
                        color:rgba(254,129,5,1);
                    }
                    .period{
                        font-size:pxToRem(14px);
                        color:rgba(106,205,248,1);
                        margin-left:pxToRem(40px);
                    }
                }
                .special-p{
                    font-size:pxToRem(14px);
                    text-indent:pxToRem(9px);
                    padding-top:pxToRem(4px);
                    .grey{
                        color:#ccc;
                    }
                }
            }
        }
        .lesson-introduce{
            background:#fff;
            font-size:pxToRem(14px);
            border-bottom:2px solid #eee;
            padding:pxToRem(10px) pxToRem(4px) 0;
            p{
                color:#ccc;
                padding:0 pxToRem(6px);            
            }
            .introduce{
                text-indent:pxToRem(20px);
            }
        }
        .lesson-introduce:last-child{
            padding-bottom:pxToRem(20px);
        }
        .tab{
            padding-left:pxToRem(10px);
            font-size:pxToRem(14px);
            display:flex;
            align-items:center;
            margin-top:25px;
            .icon-angle-right{
                font-size:pxToRem(30px);
                margin-right:pxToRem(8px);
                color:rgba(0,206,169,1);
            }
        }
        .lesson-footer{
            position:fixed;
            height:pxToRem(50px);
            background:#fff;
            width:pxToRem(320px);
            bottom:0;
            border-top:1px solid #eee;
            div{
                position:fixed;
                bottom:0;
                left:50%;
                margin-left:pxToRem(-80px);
                margin-bottom:pxToRem(5px);
                background:#fff;
                .register{
                    background:rgba(254,129,5,1);
                    color:#fff;
                    height:pxToRem(36px);
                    width:pxToRem(150px);
                }
            }
        }
    }
</style>